
<template>
<!-- 141334 -->
  <div class="article">
    <div>
      <van-nav-bar class="app-nav-bar" title="文章详情" left-arrow @click-left="$router.back()" />
    </div>

    <!-- 主体 -->
    <div class="article-wrap">
      <h1 class="title">{{article.title}}</h1>
    <van-cell center class="user-info">
      <div slot="title" class="name">{{article.aut_name}}</div>
      <van-image class="avatar" slot="icon" fit="cover" round :src="article.aut_photo"></van-image>
      <div slot="label" class="pubdate">{{article.pubdate | relativeTime}}</div>
      <van-button class="follow-btn" :type="article.is_followed ? 'default' : 'badge' "
        :icon="article.is_followed ? '' : 'plus'" round size="small" :loading="isFollowLoading" @click="onFllow">
        {{article.is_followed ? '已关注' : '关注'}}</van-button>
    </van-cell>
    <div class="markdown-body" v-html="article.content" ref="article-content">
    </div>
    <!-- 文章评论· -->
    <comment-list 
    :source='articleId'
    :list= 'commentList'
    @update-total-count="totalCommentCount=$event"
    @reply-click="onReplyClick"
    ></comment-list>
    </div>
    

    <!-- 底部区域 -->
    <div class="article-bottom">
      <van-button class="comment-btn" type="default" round size="small" @click="isPostShow = true">写评论</van-button>
      <van-icon name="comment-o" :badge="totalCommentCount" color="#777" />
      <van-icon :color="article.is_collected ? 'orange': '#777'" :name="article.is_collected ? 'star': 'star-o'"
        @loading="isCollectLoading" @click="onCollect" />
      <van-icon :color="article.attitude === 1 ? 'red': '#777'" :name="article.attitude === 1 ? 'good-job': 'good-job-o'" 
        @click="onLike" />
      <van-icon name="share" color="#777777"></van-icon>
    </div>
    <!-- /底部区域 -->
    <!-- 发布评论 -->
    <van-popup v-model="isPostShow" position="bottom">
      <post-comment 
      :target="articleId"
      @post-success="onPostSuccess"></post-comment>
    </van-popup>
    <!-- 发布评论 -->
    
    <!-- 评论回复 -->
    <van-popup v-model="isReplyShow" position="bottom">
      <comment-reply
      v-if="isReplyShow"
      :comment="replyComment"
      :article-id="articleId"
      @close="isReplyShow = false"
      ></comment-reply>
    </van-popup>
    <!-- 评论回复 -->
  </div>
</template>
<script>
  import './github-markdown.css'
  import CommentList from './components/comment-list'
  import PostComment from './components/post-comment'
  import CommentReply from './components/comment-reply'
  import {
    getArticleById,
    addCollect,
    deleteCollect,
    addLike,
    deleteLike
  } from '@/api/article'
  import {
    addFollow,
    deleteFollow
  } from '@/api/user'
  import {
    ImagePreview
  } from 'vant';

  export default {
    props: {
      articleId: {
        type: [String, Number, Object],
        required: true
      }
    },
    components:{
      CommentList,PostComment,CommentReply
    },
    data() {
      return {
        article: {},
        isFollowLoading: false, //关注用户loading状态
        isCollectLoading: false,
        isPostShow:false,
        commentList:[], //文章评论列表
        totalCommentCount:0, //评论总数
        isReplyShow:false, //评论的评论
        replyComment:{}, //当前回复对象
      }
    },
    created() {
      this.loadArticle()
    },
    methods: {
      async loadArticle() {
        const res = await getArticleById(this.articleId)
        // console.log(res);
        this.article = res.data.data
        // console.log(articleContent);
        //得到所有img标签
        //数据改变影响视图不是立即的所以需要放到￥next中
        this.$nextTick(() => {
          this.handelePerviewImage()
        })
      },
      handelePerviewImage() {
        //获取dom容器
        const articleContent = this.$refs['article-content']
        const imgs = articleContent.querySelectorAll('img')
        // console.log(imgs);
        const imgPaths = []
        imgs.forEach((img, index) => {
          imgPaths.push(img.src)
          img.onclick = function () {
            ImagePreview({
              images: imgPaths,
              startPosition: index,
            });
          }
        })
      },
      //关注
      async onFllow() {
        this.isFollowLoading = true
        if (this.article.is_followed) {
          await deleteFollow(this.article.aut_id)
          this.article.is_followed = false
        } else {
          await addFollow(this.article.aut_id)
          this.article.is_followed = true
        }
        this.isFollowLoading = false
      },
      //收藏
      async onCollect() {
        this.$toast.loading({
          message: '操作中...',
          forbidClick: true // 禁止背景点击
        })
        if (this.article.is_collected) {
          // 已收藏，取消收藏
          await deleteCollect(this.articleId)
        } else {
          // 没有收藏，添加收藏
          await addCollect(this.articleId)
        }
        this.article.is_collected = !this.article.is_collected
        this.$toast.success(`${this.article.is_collected ? '' : '取消'}收藏成功`)
      },
      //点赞
      async onLike(){
        this.$toast.loading({
          message: '操作中...',
          forbidClick: true // 禁止背景点击
        })
        if (this.article.attitude ===1) {
          await deleteLike(this.articleId)
          this.article.attitude =-1
        } else {
          await addLike(this.articleId)
          this.article.attitude =1
        }
        this.$toast.success(`${this.article.attitude ===1 ? '' : '取消'}点赞成功`)
      },
      onPostSuccess(comment){
        this.$toast.loading({
          message: '发布中',
          forbidClick: true // 禁止背景点击
        })
        //将评论放到列表顶部
        this.commentList.unshift(comment)
        //跟新评论总数
        this.totalCommentCount++
        //关闭弹出层
        this.isPostShow=false
       
      },
      onReplyClick(comment){
        this.replyComment = comment
        //展示回复内容
        this.isReplyShow = true
      }
    }
  }
</script>
<style lang="scss" scoped>
   .article-wrap{
     position: fixed;
    left: 0;
    right: 0;
    top: 44px;
    bottom: 44px;
    overflow-y: auto;
   }
  .title {
    font-size: 20px;
    color: #3a3a3a;
    padding: 14px;
    background-color: #fff;
    margin: 0;
  }

  .user-info {
    .avatar {
      width: 35px;
      height: 35px;
      margin-right: 8px;
      ;
    }

    .name {
      font-size: 12px;
      color: #333333;
    }

    .pubdate {
      font-size: 11px;
      color: #b4b4b4;
    }

    .follow-btn {
      width: 85px;
      height: 29px;
    }
  }

  .markdown-body {
    padding: 14px;
    background-color: #fff;
  }

  .article-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    height: 44px;
    border-top: 1px solid #d8d8d8;
    background-color: #fff;

    .comment-btn {
      width: 141px;
      height: 23px;
      border: 1px solid #eeeeee;
      font-size: 15px;
      line-height: 23px;
      color: #a7a7a7;
    }

    .van-icon {
      font-size: 20px;

      .van-info {
        font-size: 11px;
        background-color: #e22829;
      }
    }
  }
</style>